
<template>
  <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #31a1ec">
    <div style="display: flex; background-color: white; width: 60%; border-radius: 5px; overflow: hidden">
      <div style="flex: 1">
        <img src="@/assets/imgs/logo.png"  style="width: 100%">
      </div>
      <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
        <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
          <el-form :model="user" :rules="rules" ref="loginRef" style="width: 80%">
            <div style="font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px">
              欢迎注册后台管理系统
            </div >
            <el-form-item prop="username">
              <el-icon :size="20" ><User style="width: 1em; height: 1em;"/></el-icon>
              <spen style="width: 90%"><el-input size="medium" placeholder="请输入账号" v-model="user.username"></el-input></spen>
            </el-form-item>
            <el-form-item prop="password">
              <el-icon :size="20" ><Lock style="width: 1em; height: 1em;"/></el-icon>
              <spen style="width: 90%"><el-input  size="medium" show-password placeholder="请输入密码" v-model="user.password"></el-input></spen>
            </el-form-item>
            <el-form-item prop="confirm" >
              <el-icon :size="20"><EditPen style="width: 1em; height: 1em;"/></el-icon>
              <spen style="width: 90%"><el-input size="medium" show-password placeholder="请确认密码" v-model="user.confirm"></el-input></spen>
            </el-form-item>


            <el-form-item>
              <el-button type="primary" style="width: 100%" @click="register">注册</el-button>
            </el-form-item>
            <div style="display: flex ">
              <div style="flex: 1">已有账号？去<span style="color: #0f9876; cursor: pointer" @click="login">登录</span></div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

import ValidCode from "@/components/ValidCode.vue";
import {User, Lock, EditPen} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

export default {
  name: "login",
  components: {
    User,
    Lock,
    EditPen,
    ValidCode
  },

  data(){
    // 表单验证规则
    const validatePass = (rule, confirm, callback) => {
      if (confirm === '') {
        callback(new Error('请确认密码'));
      } else if (confirm !== this.user.password){
        callback(new Error('密码不一致'));
      } else {
        callback();
      }
    };

    return{
      user:{
        username:'',
        password:'',
        confirm:'',
      },
      rules: {
        username:[
          {required:true,message:'请输入账号',trigger:'blur'},
          {min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}
        ],
        confirm:[
          {validator:validatePass,trigger:'blur'},
        ]
      }
    };
  },
  mounted() {
  },
  methods:{

    register(){
      this.$refs.loginRef.validate(async valid => {
        if (valid) {
          if (this.user.password !== this.user.confirm) {
            ElMessage.error('两次密码不一致');
          }
          else {
            request.post('/register', this.user).then(response => {
              if (response.code === 1) {
                ElMessage.success('注册成功,请登录完善个人信息');
                this.$router.push('/login');
              } else {
                ElMessage.error(response.msg);
              }
            })
                .catch(error => {
                  console.log(error);
                  ElMessage.error('注册请求失败，请稍后再试'); // 添加通用错误提示
                });
          }
        }
      });
    },

    login(){
      this.$router.push('/login');
    },

  }
}
</script>

<style scoped>

</style>